<template>
    <div class="navbtmbox" v-if="offshow">
        <ul>
            <li :class="{nav_active:status==0}" @click="turnUrl('/index')">
                <div class="nav_1"></div>
                <p>首页</p>
            </li>
            <li :class="{nav_active:status==1}" @click="turnUrl('/mission')">
                <div class="nav_2"></div>
                <p>任务</p>
            </li>
            <li :class="{nav_active:status==2}" @click="turnUrl('/team')">
                <div class="nav_3"></div>
                <p>团队</p>
            </li>
            <li :class="{nav_active:status==3}" @click="turnUrl('/person')">
                <div class="nav_4"></div>
                <p>我的</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "navTab",
    data() {
        return {
            offClass: true,
            status: 0,
            offshow: true,
        };
    },
    props: ["navStatus"],
    computed: {
        count() {
            return this.navStatus;
        },
    },

    mounted() {
        let aurl = sessionStorage.navStatus;
        if (this.$route.path == "/" || this.$route.path == "/index") {
            sessionStorage.navStatus = "/";
            this.changestatus("/");
        } else {
            if (aurl) {
                this.changestatus(aurl);
            } else {
                this.offshow = false;
            }
        }
    },
    watch: {
        count(val) {
            this.changestatus(val);
        },
    },
    methods: {
        changestatus(dtatus) {
            switch (dtatus) {
                case "/index":
                    this.status = 0;
                    this.offshow = true;
                    break;
                case "/mission":
                    this.status = 1;
                    this.offshow = true;
                    break;
                case "/":
                    this.status = 0;
                    this.offshow = true;
                    break;
                case "/team":
                    this.status = 2;
                    this.offshow = true;
                    break;
                case "/person":
                    this.status = 3;
                    this.offshow = true;
                    break;
                default:
                    this.status = 0;
                    this.offshow = false;
                    sessionStorage.removeItem("navStatus");
                    break;
            }
        },
        turnUrl(ourl) {
            sessionStorage.navStatus = ourl;
            this.$router.push({ path: ourl });
            //this.navigate(this, { path: ourl });
            sessionStorage.removeItem("icur");
        },
    },
};
</script>

<style scoped lang="less">
@import "../style/default";
.navbtmbox {
    width: 100%;
    height: 1.66rem;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid rgba(239, 239, 239, 1);
    z-index: 500;

    ul {
        overflow: hidden;
        width: 100%;
        height: 0.98rem;
        margin-top: 0.2rem;

        .nav_active p {
            color: @color1;
        }

        .nav_active .nav_1 {
            background: url("../assets/img/icon_nav_1.png") center center
                no-repeat;
            background-size: auto 100%;
        }

        .nav_active .nav_2 {
            background: url("../assets/img/icon_nav_2.png") center center
                no-repeat;
            background-size: auto 100%;
        }

        .nav_active .nav_3 {
            background: url("../assets/img/icon_nav_3.png") center center
                no-repeat;
            background-size: auto 100%;
        }

        .nav_active .nav_4 {
            background: url("../assets/img/icon_nav_4.png") center center
                no-repeat;
            background-size: auto 100%;
        }

        li {
            float: left;
            width: 25%;
            height: 0.98rem;
            cursor: pointer;

            div {
                width: 0.4rem;
                height: 0.36rem;
                margin: 0.12rem auto 0.12rem auto;
            }

            .nav_1 {
                background: url("../assets/img/icon_nav_1_h.png") center center
                    no-repeat;
                background-size: auto 100%;
            }

            .nav_2 {
                background: url("../assets/img/icon_nav_2_h.png") center center
                    no-repeat;
                background-size: auto 100%;
            }

            .nav_3 {
                background: url("../assets/img/icon_nav_3_h.png") center center
                    no-repeat;
                background-size: auto 100%;
            }

            .nav_4 {
                background: url("../assets/img/icon_nav_4_h.png") center center
                    no-repeat;
                background-size: auto 100%;
            }

            p {
                text-align: center;
                font-size: 0.24rem;
                font-weight: 500;
                color: @color2;
            }
        }
    }
}
</style>
